<template>
	<article>
		<div class="title"  v-title="'留言信息'">留言信息</div>
		<ul v-if="list.length > 0">
			<li v-for="(v, index) in list">
				<img :src="v.cwtp" @click="goInfo(v.cwid)">
				<div @click="goInfo(v.cwid)">
					<div class="name">{{v.lyrnc}}</div>
					<div class="content">{{v.lynr}}</div>
				</div>
				<div class="time">{{v.lysj}}</div>
				<span class="lx" @click="contactsFn(v.sjh, v.wxzh)" v-if="v.optype=='N'">联系他</span>
				<img src="../../assets/img/close.png" class="close" v-if="v.optype=='Y'" @click.stop="del(index, v.lyid)">
			</li>
		</ul>
		<div v-else class="empty">
			<img src="../../assets/img/empty.png">
		</div>
		<Loading></Loading>
		<mt-actionsheet :actions="actions" v-model="contacts" cancelText="取消"></mt-actionsheet>
	</article>
</template>

<script type="text/javascript">
	import Loading from '../loading/loading'
	export default {
		components: { Loading },
		data () {
			return {
				list: [],
				pageindex: 1,
				scrollBol: true,
				actions: [],
				contacts: false,
			}
		},
		created () {
			this.$store.state.wrap = false;
		  this.$store.state.info = false;
			this.getData();
			window.addEventListener('scroll', this.loadMore);
		},
		methods: {
			contactsFn (tel, wxzh) {
				this.actions = [
					{
						name: "手机：" + tel,
						method: function(){
							window.location.href = "tel:" + tel
						}
					},
				]
				this.contacts = true;
			},
			loadMore () {
				if (!this.scrollBol) {
					this.$store.state.loading = false;
					return false
				}
				var self = this;
				if (document.body.scrollTop >= document.body.clientHeight - window.innerHeight) {
					this.$store.state.loading = true;
					if (!this.$store.state.isLoading) {
						this.$store.state.isLoading = true;
						this.pageindex ++;
						this.getData()
					}

				}
			},
			goInfo (id) {
				this.$router.push({path: '/petInfo/' + id})
			},
			del (index, id) {
				this.axios.get(this.$store.state.hostname + 'cw/delmsg.do',{
					lyid: id,
					pageindex: this.pageindex
				}).then( res => {
					console.log(res)
					this.list.splice(index, 1)
				})

			},
			getData () {

				this.axios.get(this.$store.state.hostname + 'cw/getlylist.do',{
					yhid: this.ls.getItem('userID'),
					// yhid:48,
					pageindex: this.pageindex
				}).then( res => {
					console.log({
					yhid: this.ls.getItem('userID'),
					pageindex: this.pageindex
				})
					console.log(res)
					if (res.list.length < 10) {
						this.scrollBol = false;
					}
					if (this.pageindex > 1) {
						this.list = this.list.concat(res.list);
					}else{
						this.list = res.list;
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.title {
		font-size: 0.18rem;
		text-align: center;
		line-height: 0.4rem;
		color: #555;
	}

	.empty {
			margin-top: 0.2rem;
			border-top:1px solid #eee;
			img {
				width: 0.7rem;
				display: block;
				margin:0.2rem auto;
			}
		}

	ul {
		li {
			position: relative;
			width: 100%;
			padding:0.15rem 0.15rem;
			margin:0.1rem 0;
			min-height: 1rem;
			display:flex;
			align-items: center;
			justify-content:space-between;
			&:after {
				content: '';
				position: absolute;
				width: 200%;
				height: 200%;
				top:0;left:0;
				border:1px solid #ccc;
				transform-origin: 0 0;    //设置元素的基点为0 0
				transform: scale(0.5);
				z-index: -1;
			}
			.name {
				font-size:0.15rem;
				margin-left:0.2rem;
			}

			.content {
				font-size: 0.1rem;
				margin-left:0.2rem;
				line-height: 0.14rem;
				margin-top:0.1rem;
				word-wrap:break-word;
				width:1rem
			}

			.time {
				text-align:center;
				width: 1rem;
				font-size: 0.12rem;
				margin-right:0.2rem;
			}
			.lx{
				color: #D55D52;
				font-weight: 700;
			}

			img {
				width: 0.5rem;
			}

			.close {
				position: absolute;
				right:0.1rem;top:0.05rem;
				width: 0.15rem;
			}

		}
	}
</style>
